<template>
  <view>
    <u-popup
      :show="show"
      @close="close"
      mode="bottom"
      round="10"
      :closeable="false"
      closeOnClickOverlay
    >
      <view class="popDialog">
        <view class="title">
          <view class="font-34 text-bold color-title2">请选择优惠券</view>
          <view class="font-24 c-89">仅限指定商品可使用优惠券</view>
          <image
            :src="$util.img('image/sanqi/quan.png')"
            mode=""
            class="icon"
          ></image>
        </view>
        <scroll-view scroll-y="true" class="scroll">
          <view
            class="coupon-item"
            v-for="(item, index) in couponList"
            :key="index"
            @click="selectCoupon(item)"
          >
            <image
              class="coupon-bg"
              :src="$util.img('image/sanqi/coupon_bg.png')"
            ></image>
            <view class="coupon-content">
              <view class="coupon-left" v-if="item.type == 'reward'">
                <text class="coupon-amount">{{ parseFloat(item.money) }}</text>
                <text class="coupon-unit">元</text>
              </view>
              <view class="coupon-left" v-else>
                <text class="coupon-amount">{{
                  parseFloat(item.discount)
                }}</text>
                <text class="coupon-unit">折</text>
              </view>
              <view class="coupon-right">
                <view class="coupon-header">
                  <text class="coupon-name ellipsis">{{
                    item.coupon_name
                  }}</text>
                  <view>
                    <image
                      :src="$util.img('image/radio2.png')"
                      mode=""
                      class="radio"
                      v-if="item.coupon_id == couponId"
                    ></image>
                    <image
                      :src="$util.img('image/radio.png')"
                      mode=""
                      class="radio"
                      v-else
                    ></image>
                  </view>
                </view>
                <text class="coupon-condition" v-if="item.at_least > 0"
                  >满{{ item.at_least }}元可用</text
                >
                <text class="coupon-condition" v-else>无门槛</text>
                <text class="coupon-time"
                  >有效期至 {{ $util.timeStampTurnTime(item.end_time) }}</text
                >
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="submit" @click="popupConfirm()">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "chooseCoupon",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    couponList: {
      type: Array,
      default: () => [],
    },
    couponId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("close");
    },
    selectCoupon(item) {
      console.log(item);
      this.$emit("selectCoupon", item);
    },
    popupConfirm() {
      this.$emit("popupConfirm");
    },
  },
};
</script>

<style lang="scss" scoped>
.popDialog {
  border-radius: 20rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffefe5 0%, #f5f6f7 22%);
  padding: 30rpx 24rpx;
  // 顶部
  .title {
    position: relative;
    margin: 0 24rpx 20rpx;
    .icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 215rpx;
      height: 163rpx;
    }
  }

  .pop_title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .scroll {
    height: 500rpx;
    margin-bottom: 50rpx;
  }
  .submit {
    width: 702rpx;
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    border-radius: 20rpx;
    background: $color-title2;
    color: #fff;
  }
}

.coupon-item {
  position: relative;
  width: 686rpx;
  height: 198rpx;
  margin-bottom: 30rpx;

  .coupon-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 686rpx;
    height: 198rpx;
  }

  .coupon-content {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .coupon-use {
    position: absolute;
    top: 0;
    right: 0;
    width: 112rpx;
    height: 112rpx;
  }

  .coupon-left {
    width: 150rpx;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding-top: 30rpx;
    font-weight: bold;

    .coupon-amount {
      font-size: 70rpx;
      color: #ffffff;
      line-height: 1;
      margin-right: 4rpx;
    }

    .coupon-unit {
      font-size: 26rpx;
      color: #ffffff;
    }
  }

  .coupon-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40rpx;

    .coupon-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;

      .coupon-name {
        font-size: 28rpx;
        color: #151826;
        font-weight: 600;
      }

      .get-btn {
        background-color: $color-title2;
        color: white;
        padding: 0 20rpx !important;

        border-radius: 40rpx;
        font-size: 24rpx;
        margin: 0;
      }
    }

    .coupon-condition {
      font-size: 24rpx;
      color: $color-title2;
      margin-bottom: 10rpx;
    }

    .coupon-time {
      font-size: 22rpx;
      color: #788096;
    }
  }
}
.radio {
  width: 34rpx;
  height: 34rpx;
}
</style>
